<template>
  <div class="container">
    <!-- fixed使得van-nav-bar靠顶部固定定位 -->
    <van-nav-bar fixed title="搜索结果" left-arrow @click-left="$router.back()" />

    <!-- 瀑布流加载效果 -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell 
        v-for="item in searchList"
        :key="item.art_id.toString()"
        :title="item.title"
      />
    </van-list>
  </div>
</template>

<script>
// 获取文章api
import { apiSearchList } from "@/api/search.js";
export default {
  name: "search-result",
  data() {
    return {
      // 瀑布流相关成员
      list: [], // 临时瀑布数据
      loading: false, // 瀑布动画加载效果标志
      finished: false, // 瀑布停止标志
      page: 1, // 页码
      searchList: [] // 根据关键字获得的文章列表信息
    };
  },
  // created() {
  //   // 文章列表
  //   this.getSearchList();
  // },
  methods: {
    // 获取文章列表
    // async getSearchList() {
    //   // 调用api
    //   const args = { q: this.$route.params.keyword };
    async onLoad () {
      await this.$sleep(1000)
      // 获取文章数据
      const args = { q: this.$route.params.keyword, page: this.page};
      const result = await apiSearchList(args);
      // data接收
      // this.searchList = result.results;
      
      // 去除瀑布加载动画效果
      this.loading = false

      // 如果没有获取到
      if (!result.results.length) {
        // 停止瀑布
        this.finished = true
        return false // 停止后续代码执行

        // 有获取到
        this.searchList.push(...result.results)
        // 分页累加
        this.page++
      }
    }
  }
};
</script>

<style scoped lang='less'>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-sizing: border-box;
  .van-list {
    flex: 1;
    margin-top: 92px;
  }
}
</style>